body{
    background-color: #f5f6f8;
    font-size: 0;
    padding-bottom: 1.2rem;
}


header{
    background-image: url("../img/banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 3.24rem;
    padding: 0.48rem 0.2rem 0 0.2rem;
}
.top1{
    height: 0.6rem;
    /*position: relative;*/

}

.top1>input{
    width: 88%;
    height: 100%;
    border-radius: 20px;
    color: white;
    font-size: 0.3rem;
    background-image: url("../img/find.png");
    background-position: 4%;
    background-repeat: no-repeat;
    background-size: 0.4rem;
    background-color: rgba(255,255,255,0.22);
    padding-left: 0.8rem;


}

.top1>input::-webkit-input-placeholder{
    color: white;

}
.top1 i{
    font-size: 0.4rem;
    color: white;
    /*position: absolute;*/

}


.top2{
    height: 2.16rem;
}

.top2>li{

    color: white;

}

.top2>li>i{
    font-size: 0.6rem;
}

.top2>li>p{
    font-size: 0.3rem;
    margin-top: 0.22rem;
}

/*第一层*/
.f1{
    height: 2.54rem;
    background-color: white;
    margin-bottom: 0.2rem;
    padding: 0 0.2rem;
}

.f1>ul{
    font-size: 0;
    height: 100%;
}
.f1 li{
    width: 25%;
    height: 50%;
       display: inline-block;
    text-align: center;
}

.f1 p{
    font-size: 0.28rem;
    color: #3c3c3c;
}

.f1 i{
    font-size: 0.5rem;
    margin: 0.15rem 0 0.15rem;
}

.f1_01>i{
    color: #f347ac;
}

.f1_02>i{
    color: #47b4f3;
}
.f1_03>i{
    color: #4768f3;
}

.f1_04>i {
    color: #0ed485;
}


.f1_05>i{
    color: #f89135;
}

/*第二层*/

.f2{
    height: 2.34rem;
    padding: 0.2rem 0.2rem;
    background-color: white;
    margin-bottom: 0.2rem;
}

.f2>div{
    background-image: url("../img/bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    border-radius:8px;
}


/*第三层*/

.f3{
    height: 3.84rem;
    background-color: white;
    padding: 0 0.2rem 0.2rem 0.2rem;
    border-bottom: 1px solid #eceef3;
}

.f3_01{
    height: 0.72rem;
    color: #3c3c3c;
    font-size: 0.32rem;
    border-bottom: 1px solid #eceef3;


}


.f3_01>span{
    background-color: #4768f3;
    width: 0.06rem;
    height: 0.34rem;
    margin-right: 0.17rem;
}



.f3_03{
    height: 0.96rem;
}

.f3_03>button{
    height: 100%;
    width: 100%;
    background-color: #4768f3;
    border-radius: 8px;
    color: white;
    font-size: 0.36rem;
    text-align: center;
}

.f3_03>button:active{
    background-color: #3e5ed1;
}


.f3_02{
    height: 1.96rem;
}

.f3_02 p{
    font-size: 0.28rem;
    color: #5e5e63;
    margin-top: 0.28rem;
}

.f3_02>div:nth-child(1){
    width: 48%;
    height: 100%;
}

.f3_02>div:nth-child(2){
    width: 2%;
    height: 50%;
    border-right:1px solid #eceef3 ;
}
.f3_02>div:last-child{
    width: 48%;
    height: 100%;
}

.f3_money01{
    color: #4768f3;
}
.f3_money01>span:nth-child(1){
    font-size: 0.25rem;
}

.f3_money01>span:nth-child(2){
    font-size: 0.48rem;
}

.f3_money01>span:last-child{
    font-size: 0.24rem;
    margin-top: 0.2rem;
}


.f3_money02{
    color: #0ed485;
}
.f3_money02>span:nth-child(1){
    font-size: 0.25rem;
}

.f3_money02>span:nth-child(2){
    font-size: 0.48rem;
}

.f3_money02>span:last-child{
    font-size: 0.24rem;
    margin-top: 0.2rem;
}


/*底部*/
footer{
    height: 1rem;
    background-color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
}

footer>ul{
    height: 100%;
}
footer li{
    width: 25%;
    height: 100%;


}

footer li>i{
    font-size:0.4rem;
    color: #b6b6b6;
}
footer li>p{
    font-size: 0.24rem;
    color: #b6b6b6;
    margin-top: 0.1rem;
}

footer li:active>i{
    color: #4768f3;
}
footer li:active>p{
    color: #4768f3;
}

.xiaoxi{
    position: relative;
}

.yuandian{
    width: 0.14rem;
    height: 0.14rem;
    border-radius: 50% 50%;
    background-color: red;
    position: absolute;
    top: 13%;
    right: 37%;
}